<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>content</title>
		<link rel="stylesheet" type="text/css" href="{{__PUBLIC__}}/Home/css/header.css"/>
		<link rel="stylesheet" type="text/css" href="{{__PUBLIC__}}/Home/css/content.css"/>
		<link rel="stylesheet" type="text/css" href="{{__PUBLIC__}}/Home/css/footer.css"/>
		<link rel="shortcut icon" href="{{__PUBLIC__}}/Home/images/favicon.ico">
		<script type="text/javascript" src="{{__PUBLIC__}}/Home/js/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="{{__PUBLIC__}}/Home/js/content.js"></script>
		<script type="text/javascript">
		window.onload=function(){
			//抓取元素
			var left = document.getElementById('pic-show-left');
			var box = document.getElementById('move-big');
			var right = document.getElementById('pic-show-right');
			var rpic = document.getElementsByClassName('pic-big');
			var cover = document.getElementById('show-cover');
			// 给左侧鼠标加入移入事件
			cover.onmouseover= function(){
				box.style.display='block';
				right.style.display='block';
			}
			//给左侧鼠标加入移动事件

			cover.onmousemove = function(m){

				//先获得移动事件对象
				var re= window.event || m;
				//获取鼠标的位置
				var m_left= re.offsetX || re.layerX;
				var m_top= re.offsetY || re.layerY;
			//计算色块的位置
			var b_left = m_left-120;
			var b_top= m_top-120;
			//防止色块出去
			if(b_left>240){
				b_left=240;
			}
			if (b_left<0){
				b_left=0;
			}
			if (b_top>240){
				b_top=240;
			}
			if (b_top<0){
				b_top=0;
			}
			//给色块位置赋值
			box.style.left= b_left+'px';
			box.style.top= b_top+'px';
			//计算右侧大图的位置
			var rpic_left= b_left*-1.67;
			var rpic_top= b_top*-1.67;
			//给右侧大图赋值
			for(var i=0;i<rpic.length;i++){
				rpic[i].style.left= rpic_left+'px';
				rpic[i].style.top = rpic_top+'px';
			}

			}
			//给左侧加入鼠标移出事件
			cover.onmouseout=function(){
				box.style.display='none';
				right.style.display= 'none';
			}
		}
		</script>
		<script>
			//选择货品------------------------------------------------------------- 
			$(function(){
				$('.p-style dd ul li').click(function(){
					var len = $('.p-style dd').find('.cur').length;
					var leng = $('.p-style').length;
					var gaid = '';
					if(len == leng){
						gid = $('input[name=gid]').val();
						$.each($('.cur'),function(index){
							gaid += '|';
							gaid += $('.cur').eq(index).attr('gaid');
						})
						gaid = gaid.substr(1,20);
						$.ajax({
							//请求地址
							url:"{{U('getAjax')}}",
							//发送数据
							data:{gaid:gaid,gid:gid},
							//请求类型
							type:'post',
							//返回的数据类型
							dataType:'json',
							//成功返回
							success:function(phpData){
								data=phpData;
								if(data.status){
									$('.user-selected').html(data.message);
									$('.p-button-no').css({'display':'block'}).siblings('a').css({'display':'none'});
								}else{
									$('.p-button-gou').css({'display':'block'}).siblings('a').css({'display':'none'});
									$('.user-selected').html(data.combine);
									// $('.pro-add-success-msg .gselect').html(data.combine);
									$('#inventory').html(data.inventory);
									$('#art_no').html(data.art_no);
									$('#shopping').html(data.price);
								}
							}
							
						})
					}

				})
				// 购物车------------------------------------------
				$('.p-button-gou').live('click',function(){
						//所选规格数量
					var len = $('.p-style dd').find('.cur').length;
						//须选规格数量
					var leng = $('.p-style').length;
						//库存
					var total = $('#inventory').html()*1;
						//用户购买数量
					var num = $('#p-total-num').html()*1;
						//如果要选的规格没有选
					if(len != leng){
						alert('请选择商品');
						return false;
					}
						//如果购买数量超出库存
					if(num>total){
						alert("该型号商品库存不足");
						return false;
					}
						//ajax传送
					gid = $('input[name=gid]').val();
					var gaid = '';
					$.each($('.cur'),function(index){
						gaid += '|';
						gaid += $('.cur').eq(index).attr('gaid');
					})
					gaid = gaid.substr(1);
					$.ajax({	
							//请求地址
						url:"{{U('OrderList/getAjax')}}",
							//请求数据
						data:{gaid:gaid,gid:gid,num:num},
							//请求类型
						type:'post',
							//返回的数据类型
						dataType:'json',
							//成功返回
						success:function(odata){
							$('.gselect').html(odata.gname);
							$('#cart-total').html(odata.number);
							$('.cart-price-a').html(odata.price);
						}
					})
					$('.success_addgoods').css({display:'block'});
				});
				$('.success_addgoods span').live('click',function(){
					$('.success_addgoods').css({display:'none'});
				});

			})
			
		</script>
		{{include file="VIEW_PATH/Common/header.php"}}
<!--------------------------------顶部-------------------------------->
	<div class="hr-10"></div>
	<div class="crumb">
		<a href="">首页</a>
		{{foreach from="$parent" value="$vc"}}
			&nbsp;&nbsp;>&nbsp;&nbsp;<span>{{$vc['cname']}}</span>
		{{endforeach}}
		&nbsp;&nbsp;>&nbsp;&nbsp;<span>{{$data['gname']}}</span>
	</div>
	<div class="hr-10"></div>
	<div class="main">
		<div class="main-left">
			<div id="pic-show-left">
				{{foreach from="$middle" value="$vm"}}
					<img class="pic-small" src="{{__ROOT__}}/Upload/album/{{$vm}}" alt="" style="display:block;"/>
				{{endforeach}}
				
				<div id="move-big"></div>
				<div id="show-cover"></div>
			</div>
			<div id="pic-show-right">
				{{foreach from="$big" value="$vb"}}
					<img class="pic-big" src="{{__ROOT__}}/Upload/album/{{$vb}}" alt="" style="display:block;" />
				{{endforeach}}
				
			</div>
			<div class="pic-show-bottom">
				<div class="c-guider-dy">
					<div id="box">
						<ul class="uu">
							{{foreach from="$small" value="$vs"}}
								<li class="uu-one">
									<img src="{{__ROOT__}}/Upload/album/{{$vs}}" alt="">
								</li>
							{{endforeach}}
						</ul>
					</div>
					<input type="button" id="btn" class="cmbt" value="<">
					<input type="button" id="btn1" class="cmbt" value=">">
				</div>
			</div>
		</div>
		<div class="main-right-up">
			<p class="p-name">{{$data['gname']}}</p>
			<p class="p-info">
			<?php echo mb_substr(strip_tags($data['goods_info']),0,60,'UTF-8').'......' ?>
			</p>
			<p class="p-info-1"><?php echo strip_tags($data['goods_info'])?></p>
		</div>
		<div class="main-right-mid">
			<p class="p-price"><i class="p-tag">华&nbsp;&nbsp;为&nbsp;价：</i><em>￥</em><span class="p-price" id="shopping">{{$data['shop_price']}}</span></p>
			<p class="p-number"><i>商品编码：<span id="art_no">{{$data['art_no']}}</span></i></p>
			<p class="p-number"><i>商品评分：（共 958 条评论）</i></p>
			<p class="p-number"><i>运&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;费：满 99 免运费</i></p>
			<p class="p-number"><i>服&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务：由华为商城负责发货，并提供售后服务</i></p>
		</div>
		<div class="main-right-bot">
			<div class="hr-15"></div>
			<div class="p-chose">
				{{foreach from="$select_menu" value="$svv"}}
					<dl class="p-style">
						<dt><i>选择{{$svv['taname']}}：</i></dt>
						<dd>
							<ul class="p-style-dy">
								{{foreach from="$svv['item_son']" key="$ks" value="$svx"}}
									<li gaid="{{$ks}}"><a href="javascript:;">{{$svx}}</a><i></i></li>
								{{endforeach}}
							</ul>
						</dd>
					</dl>
				{{endforeach}}
				<input type="hidden" name="gid" value="{{$_GET['gid']}}">
			</div>
			<!-- <div class="p-relative">
				<dl class="p-goods">
					<dt><i>关联商品：</i></dt>
					<dd>
						<a href="">华为 HUAWEI Mate S 臻逸版</a>
					</dd>
				</dl>
			</div> -->
			<div class="p-relative">
				<dl class="p-goods">
					<dt><i>库存：</i></dt>
					<dd>
						<a id="inventory" href="javascript:;">{{$data['inventory']}}</a>
					</dd>
				</dl>
			</div>
			<div class="p-total">
				<dl class="p-goods-num">
					<dt><i>购买数量：</i></dt>
					<dd>
						<a class="p-add-p" href="javascript:;"><span>-</span></a>
						<div id="p-total-num">1</div>
						<a class="p-add" href="javascript:;"><span>+</span></a>
					</dd>
				</dl>
			</div>
		</div>
		<div class="main-p-gou">
			<div class="p-select">
				<i>您选择了</i>&nbsp;&nbsp;&nbsp;<i class="user-selected"></i>
			</div>
			<a href="javascript:;" class="p-button-gou"><i>加入购物车</i></a>
			<a href="javascript:;" class="p-button-no"><i>到货通知</i></a>
			<div class="success_addgoods">
                <span></span>
                <i></i>
                <div class="success_addgoods_r">
                    <p></p>
                    <div class="pro-add-success-msg"><em class="gselect"></em>成功加入购物车!</div>
                    <div class="pro-add-success-total">购物车中共&nbsp;<b id="cart-total"></b>&nbsp;件商品，金额合计&nbsp;<b id="cart-price">¥&nbsp;<em class="cart-price-a"></em></b>
                    </div>
                    <div class="pro-add-success-button">
                        <a href="{{U('OrderList/index')}}" class="button-style-1 button-go-cart">去结算</a>
                        <a href="{{U('Index/index')}}" class="button-style-4 button-walking" class="jixu">继续逛逛&nbsp;&gt;&gt;</a>
                    </div>
                </div>
            </div>
		</div>
	</div>
	<div class="hr-20"></div>
		<!--详细信息-->
	<div class="main-datil">
		<div class="hot-area">
			<h3>热销榜单</h3>
			<ul>
				{{foreach from="$dataAllaa" key="$k" value="$vd"}}
				<li>
					<i class="s{{$k+1}}"></i>
					<div class="hot-sale">
						<a href="{{U('Content/index',array('gid'=>$vd['gid'],'cid'=>$vd['category_cid']))}}"><img src="{{__ROOT__}}/{{$vd['list_view']}}"/></a>
						<p class="p-info-hot"><a href="{{U('Content/index',array('gid'=>$vd['gid'],'cid'=>$vd['category_cid']))}}"><?php echo mb_substr(strip_tags($vd['gname']),0,14,'UTF-8') ?></a></p>
						<p class="p-price-hot"><em>￥</em><span>{{$vd['shop_price']}}</span></p>
					</div>
				</li>
				{{endforeach}}
			</ul>
		</div>
		<div class="goods-datil">
			<div class="goods-top">
				<ul>
					<li><a href="">商品详情</a></li>
				</ul>
			</div>
			<div class="goods-pic">
					{{$data['goods_detail']}}
			</div>
		</div>
	</div>
	<div class="hr-60"></div>
		<!-- 底部 -->
	{{include file="VIEW_PATH/Common/footer.php"}}

	</body>
</html>